<template>
  <sys-dialog
      :title="dialog.title"
      :height="dialog.height"
      :visible="dialog.visible"
      @onClose="onClose"
      @onConfirm="confirm"
  >
    <template #content>
      <a-form>
        <a-form-item v-bind="validateInfos.roomName" label="教室名称">
          <a-input v-model:value="addModel.roomName" placeholder="请输入教室名称"></a-input>
        </a-form-item>
        <a-form-item v-bind="validateInfos.roomAddress" label="教室地址">
          <a-input v-model:value="addModel.roomAddress" placeholder="请输入教室地址"></a-input>
        </a-form-item>
      </a-form>
    </template>
  </sys-dialog>
</template>

<script setup lang="ts">
import {ref, reactive, onMounted, computed} from 'vue'
import useDialog from "@/hooks/useDialog";
import SysDialog from "@/components/SysDialog.vue";
import {useForm} from "ant-design-vue/lib/form";
import {EditType, Title} from "@/type/BaseEnum";
import useInstance from "@/hooks/useInstance";

//全局属性
const {global} = useInstance()

//弹框属性
const { dialog, onShow, onConfirm, onClose } = useDialog();
//表单数据
const addModel = reactive({
  type: '',
  roomId: '',
  roomName: '',
  roomAddress: ''
})
//表单验证规则
const rules = reactive({
  roomName: [{
    required: true,
    message: '请输入教室名称',
    trigger: 'change'
  }],
  roomAddress: [{
    required: true,
    message: '请输入教室地址',
    trigger: 'change'
  }]
})

//获取验证方法
const { validate, validateInfos, resetFields } = useForm(addModel, rules)
//定义方法，供父组件调用
const show = (type: any,row:any) => {
  //清空表单
  resetFields();
  //设置弹框属性
  if (type == EditType.ADD) {
    dialog.title = Title.ADD
  } else {
    global.$objCopy(row,addModel)
    dialog.title = Title.EDIT
  }
  dialog.height = 180;
  addModel.type = type;
  //显示弹框
  onShow()
}
//注册事件
const emit = defineEmits(['save'])
//弹框确定
const confirm = () => {
  //表单验证
  validate().then(() => {
    //返回表单数据给父组件
    emit('save', addModel)
    onConfirm()
  })
}
//暴露方法给外部使用
defineExpose({
  show
})
</script>

<style scoped lang="scss">

</style>
